@if (content) {
  <div class="showcase-3-v3">
    <div class="showcase-inner teaser grid grid-cols-12 sm:gap-5">
      @if (content.feature) {
        @if (isShow) {
          <app-feature-box
            class="col-span-12 md:col-span-4"
            [attr.data-path]="'feature'"
            [content]="content.feature"
          />
        }
      }
      <div
        class="col-span-12 {{
          content.showImage && content.feature ? 'md:col-span-8' : 'md:col-span-12'
        }}"
      >
        <h2 class="title">
          <app-link [attr.data-path]="'title'" [content]="content.title" />
        </h2>
        <ul class="post-meta-info flex">
          @if (content.date) {
            <li class="flex justify-center items-center">
              <mat-icon>schedule</mat-icon>
              <div>{{ content.date | date: 'YYYY-MM-dd' }}</div>
            </li>
          }
          @if (content.commentCount) {
            <li class="flex justify-center items-center">
              <mat-icon>comment</mat-icon>
              <div>{{ content.commentCount }} 评论</div>
            </li>
          }
          @if (content.category) {
            <li class="flex justify-center items-center">
              <mat-icon>folder</mat-icon>
              <div>{{ content.category | slice: 0 : 20 }}</div>
            </li>
          }
        </ul>
        <div
          class="shortdesc"
          [innerHTML]="content.body | stripTags | trim | shorten: 150 : '...'"
        ></div>
        @if (content.details) {
          <div class="m-top-sm">
            <app-btn [attr.data-path]="'details'" [content]="content.details" />
          </div>
        }
      </div>
    </div>
  </div>
}
